<!--
 * @Author: zhang gen yuan
 * @Date: 2021-09-17 14:26:13
 * @Descripttion: 
-->
<template>
  <el-drawer
    :title="props.title"
    :model-value="props.drawer"
    :direction="rtl"
    :before-close="handleClose"
  >
    <div style="project-drawer">
      <el-form
        label-position="right"
        label-width="120px"
        :model="data.form"
        style="height: 90vh; overflow: auto"
        ref="form"
        :rules="rules"
      >
        <template v-for="item in formColumn" :key="item.prop">
          <el-form-item
            v-if="item.type === 'input' || item.type === 'textarea'"
            :label="item.label"
            :prop="item.prop"
          >
            <el-input
              v-model="data.form[item.prop]"
              :type="item.type"
            ></el-input>
          </el-form-item>
          <el-form-item
            :label="item.label"
            :prop="item.prop"
            v-if="item.type === 'time'"
          >
            <el-date-picker
              v-model="data.form[item.prop]"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetime"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            v-if="item.type === 'select'"
            :label="item.label"
            :prop="item.prop"
          >
            <template v-if="item.options">
              <el-select
                v-model="data.form[item.prop]"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option
                  v-for="item1 in item.options"
                  :key="item1.value"
                  :label="item1.label"
                  :value="item1.value"
                >
                </el-option>
              </el-select>
            </template>
            <template v-if="item.prop === 'userNames'">
              <el-select
                v-model="data.form[item.prop]"
                multiple
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option
                  v-for="userItem in userAll"
                  :key="userItem.id"
                  :label="userItem.name"
                  :value="userItem.id"
                >
                </el-option>
              </el-select>
            </template>
            <template v-if="item.prop === 'projectId'">
              <el-select
                v-model="data.form[item.prop]"
                placeholder="请选择"
                style="width: 80%"
              >
                <el-option
                  v-for="projectItem in projectAll"
                  :key="projectItem.id"
                  :label="projectItem.projectName"
                  :value="projectItem.id"
                >
                </el-option>
              </el-select>
            </template>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button
            type="primary"
            size="small"
            @click="submitForm('numberValidateForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('numberValidateForm')" size="small"
            >取消</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<script setup>
import {
  defineProps,
  defineEmits,
  reactive,
  ref,
  watch,
  watchEffect,
} from "vue";
import { formColumn, rules } from "./util";
import { save, update, getDetail } from "/@/api/HxTask";
let props = defineProps({
  drawer: Boolean,
  title: String,
  tableId: Number,
  userAll: Array,
  projectAll: Array,
  parentId: Number,
});
let emit = defineEmits();
let handleClose = (done) => {
  emit("closeDrawer");
  done();
};
let data = reactive({
  form: {
    id: "",
    title: "",
    info: "",
    projectId: "",
    parentId: "",
    taskLevel: "",
    startTime: "",
    endTime: "",
    predictStart: "",
    predictEnd: "",
    userNames: "",
    status: "",
  },
});
let form = ref(null);
let submitForm = () => {
  console.log(props.title);
  console.log(data.form);
  if (props.title === "新增") {
    form.value.validate(async (valid) => {
      if (valid) {
        data.form.userNames = data.form.userNames.join(",");
        let res = await save(data.form);
        if (res.code == 200) {
          emit("search");
          emit("closeDrawer");
        }
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  } else if (props.title === "新增子项") {
    form.value.validate(async (valid) => {
      if (valid) {
        data.form.userNames = data.form.userNames.join(",");
        data.form.parentId = props.parentId;
        let res = await save(data.form);
        if (res.code == 200) {
          emit("search");
          emit("closeDrawer");
        }
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  }else if(props.title === '编辑'){
     form.value.validate(async (valid) => {
      if (valid) {
        data.form.userNames = data.form.userNames.join(",");
        data.form.parentId = props.parentId;
        let res = await update(data.form);
        if (res.code == 200) {
          emit("search");
          emit("closeDrawer");
        }
      } else {
        console.log("error submit!!");
        return false;
      }
    });
  }
};
let resetForm = () => {
  form.value.resetFields();
  emit("closeDrawer");
};
watch(props, async (newProps) => {
  if (newProps.title == "编辑") {
    let res = await getDetail(newProps.tableId);
    data.form = { ...res.data };
    data.form.userNames = res.data.userNames.split(",").map(Number);
    data.form.status = data.form.status.toString();
  } else {
    for (const key in data.form) {
      if (Object.hasOwnProperty.call(data.form, key)) {
        data.form[key] = "";
      }
    }
  }
});
</script>

<style lang="scss" scoped>
.project-drawer {
  width: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 15px;
}
</style>